<template>
    <div class="goods-params-item">
        <i class="el-icon-error close" @click="closeForm"></i>
        <h4>3.1添加商品参数：</h4>
        <span>商品参数名称：</span> <el-input v-model="params.title" placeholder="请输入商品参数名称" style="width: 300px;"></el-input>
        <br>
        <el-upload
                ref="params"
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :limit="1"
                name="goodsParams"
                :auto-upload="false"
                :on-change="handleChange"
                style="margin: 20px"
                list-type="picture">
            <el-button size="small" type="primary">点击上传参数对应图片</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <el-button type="primary" @click="sendParams" class="btn">完成</el-button>
    </div>
</template>

<script>
    export default {
        name: "GoodsParamsItems",
        props: {
            scope: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                params: {
                    name: 'params',
                    title: '',
                    data: null
                }
            }
        },
        methods: {
            handlePreview() {

            },
            handleRemove() {
                this.params.data = null
            },
            handleChange(file) {
                this.params.data = file.raw;
            },
            sendParams() {
                this.$emit('sendParams', this.params)
                this.params = {
                    title: '',
                    data: null
                };
                this.$refs.params.clearFiles();
                this.$emit('close')
            },
            closeForm() {
                this.params = {
                    name: 'params',
                    title: '',
                    data: null
                }
                this.$refs.params.clearFiles();
                this.$emit('close')
            }

        }
    }
</script>

<style scoped>
    .goods-params-item {
        position: relative;
    }
    .btn {
        position: absolute;
        bottom: 3px;
        left: 50%;
        margin-left: -35px;
    }
    .close {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #cccccc;
    }
    .close:hover {
        color: #333333;

    }
</style>